<template>
  <el-dialog ref="dislogRef" :visible.sync="dialogVisible" lock-scroll width="60%" height="50%">
    <div slot="title" class="header_title">
      <span class="title_span">选择快递物流</span>
      <div class="title_search">
        <div>
          <el-input v-model="searchValue" placeholder="请输入公司名称\简称\拼音码\地址\联系人"></el-input>
          <el-button type="primary" @click="onQuery">搜索</el-button>
          <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
        </div>
        <div>
          <i @click="onShowColumn()" class="set_up el-icon-full-screen"></i>
        </div>
      </div>
    </div>
    <div class="content_div">
      <div class="info_table">
        <div class="div_table">
          <div class="table_content">
            <el-table
              id="exportTab"
              :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              height="100%"
              border
              tooltip-effect="dark"
              highlight-current-row
              :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              style="width: 100%; height: 100%"
              :cell-class-name="addClassName"
              :header-cell-class-name="addClassName"
              @row-click="onClickRow"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                v-for="(item, i) in newColumnData"
                :key="i"
                :prop="item.props"
                class="yincang"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                min-width="100px"
                :width="item.props == 'xh' ? '50px' : ''"
              ></el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.state"
                    active-color="#1A93FA"
                    inactive-color="#D3D2D2"
                  ></el-switch>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table_pagination">
            <div class="pagination_div">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pagesize"
                layout="jumper, prev, pager,next, sizes"
                :total="tableData.length"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="info_button">
        <div>
          <el-button>新增</el-button>
        </div>
        <div>
          <el-button type="primary" @click="onSelectRow">选择</el-button>
          <el-button @click="onCancelRow">取消</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'BasicInformation',
  computed: {
    ...mapGetters(['name']),
  },
  created () {
    let str = JSON.stringify(this.columnData.data)
    this.newColumnData = JSON.parse(str)
    for (let i = 0; i < 30; i++) {
      this.tableData.push({
        id: i + 1,
        xh: i + 1,
        wlmc: '顺丰速递' + (i + 1),
        wljc: '顺丰',
        pym: 'SPSD',
        lxr: '张三',
        sj: '13600000000',
        lxdh: '300',
        gswz: 'www',
        dz: '郑州市中原区',
        khyh: '郑州银行',
        yhzh: '625100000000',
        qcysk: 3,
        qcyfk: 6,
        ljysk: 9,
        ljyfk: 5,
        sxfbl: '5%',
        remarks: '测试数据',
      })
    }
  },
  updated () {
    this.setColumn()
  },
  data () {
    return {
      selectRow: {}, //当前选择的数据
      searchValue: '',
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      tableData: [],
      newColumnData: [], //修改后的列数据
      columnData: {
        title: '列配置',
        data: [
          {
            id: '1',
            morenName: '序号',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 0,
            zidingyiSort: 0,
            noModify: true,
            props: 'xh',
          },
          {
            id: '2',
            morenName: '物流快递名称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 1,
            zidingyiSort: 1,
            noModify: true,
            props: 'wlmc',
          },
          {
            id: '3',
            morenName: '物流简称',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 2,
            zidingyiSort: 2,
            noModify: false,
            props: 'wljc',
          },
          {
            id: '4',
            morenName: '拼音码',
            zidingyiName: '',
            morenState: false,
            zidingyiState: false,
            morenSort: 3,
            zidingyiSort: 3,
            noModify: false,
            props: 'pym',
          },
          {
            id: '5',
            morenName: '联系人',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 4,
            zidingyiSort: 4,
            noModify: false,
            props: 'lxr',
          },
          {
            id: '6',
            morenName: '手机',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 5,
            zidingyiSort: 5,
            noModify: false,
            props: 'sj',
          },
          {
            id: '7',
            morenName: '联系电话',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 6,
            zidingyiSort: 6,
            noModify: false,
            props: 'lxdh',
          },
          {
            id: '8',
            morenName: '公司网址',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 7,
            zidingyiSort: 7,
            noModify: false,
            props: 'gswz',
          },
          {
            id: '9',
            morenName: '地址',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 8,
            zidingyiSort: 8,
            noModify: false,
            props: 'dz',
          },
          {
            id: '10',
            morenName: '开户银行',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 9,
            zidingyiSort: 9,
            noModify: false,
            props: 'khyh',
          },
          {
            id: '11',
            morenName: '银行账号',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 10,
            zidingyiSort: 10,
            noModify: false,
            props: 'yhzh',
          },
          {
            id: '12',
            morenName: '期初应收款',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 11,
            zidingyiSort: 11,
            noModify: false,
            props: 'qcysk',
          },
          {
            id: '13',
            morenName: '期初应付款',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 12,
            zidingyiSort: 12,
            noModify: false,
            props: 'qcyfk',
          },
          {
            id: '14',
            morenName: '累计应收款',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 13,
            zidingyiSort: 13,
            noModify: false,
            props: 'ljysk',
          },
          {
            id: '15',
            morenName: '累计应付款',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 14,
            zidingyiSort: 14,
            noModify: false,
            props: 'ljyfk',
          },
          {
            id: '16',
            morenName: '手续费比率',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 15,
            zidingyiSort: 15,
            noModify: false,
            props: 'sxfbl',
          },
          {
            id: '17',
            morenName: '备注',
            zidingyiName: '',
            morenState: true,
            zidingyiState: true,
            morenSort: 16,
            zidingyiSort: 16,
            noModify: false,
            props: 'remarks',
          },
        ],
      },
      dialogVisible: false, // 新增弹框
    }
  },
  methods: {
    // 选中当前行
    onClickRow (row) {
      this.selectRow = row
    },
    // 选中后传递给父组件
    onSelectRow () {
      var objStr = JSON.stringify(this.selectRow)
      if (objStr == '{}') {
        this.$elMessage.warning('请选择一条信息')
      } else {
        this.$emit('onSelectLogistics', this.selectRow)
        this.dialogVisible = false
      }
    },
    onCancelRow () {
      this.$emit('onCancelCommodity', this.selectRow)
      this.dialogVisible = false
    },
    // 查询
    onQuery () {
      console.log(this.searchValue, '请求')
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
    },
    // 触发列配置弹框
    onShowColumn () {
      if (this.$lcStorage.get('spColumn')) {
        if (this.$lcStorage.get('spColumn').length) {
          this.columnData.data = this.$lcStorage.get('spColumn')
        }
      }
      this.showLiepeizhi = true
    },
    // 表格添加class名
    addClassName (row) {
      if (row.columnIndex != 0 && row.columnIndex != 1 && row.columnIndex != this.newColumnData.length + 2) {
        return 'set_order' //给第当前td里面添加set_order的类名
      }
    },
    // 列配置修改后数据获取
    onSaveColumn (value) {
      this.$lcStorage.set('spColumn', value)
      this.showLiepeizhi = !this.showLiepeizhi
      this.newColumnData = value
      this.setColumn()
    },
    // 设置列配置（实现列的显示隐藏、列名修改、还原默认值；上下移动列未实现）
    setColumn () {
      let getTable = document.getElementsByClassName('table_content')[0]
      let getTr = getTable.getElementsByTagName('tr')
      getTr.forEach((item) => {
        let getTd = item.getElementsByClassName('set_order')
        getTd.forEach((item, index) => {
          // item.style.order = this.newColumnData[index].zidingyiSort
          if (this.newColumnData[index].zidingyiState == false) {
            item.style.display = 'none'
          } else {
            item.style.display = 'block'
          }
        })
      })
      let getTh = getTr[0].getElementsByClassName('set_order')
      getTh.forEach((item, index) => {
        // item.style.order = this.newColumnData[index].zidingyiSort
        if (this.newColumnData[index].zidingyiState == false) {
          item.style.display = 'none'
        } else {
          item.style.display = 'block'
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 100%;
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    width: 100%;
    height: 0.937559rem;
    box-sizing: border-box;
    padding: 0 0.187512rem 0 0.281268rem;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dialog__headerbtn {
      position: static;
      .el-icon-close {
        color: #999;
        font-size: 0.48753rem;
      }
    }
  }
  .header_title {
    width: 100%;
    display: flex;
    align-items: center;
    .title_span {
      white-space: nowrap;
      font-size: 0.300019rem;
      color: #666;
      font-weight: 600;
    }
    .title_search {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0.468779rem 0 1.875117rem;
      > div {
        display: flex;
        align-items: center;
        .el-input {
          width: 4.725295rem;
          height: 0.562535rem;
          margin-right: 0.112507rem;
          .el-input__inner {
            height: 0.562535rem;
            border-color: #dddddd;
            box-sizing: border-box;
            padding: 0 0.150009rem;
            background: #fff;
            font-size: 0.225014rem;
            color: #666;
            &::placeholder {
              font-size: 0.225014rem;
              color: #c1c1c1;
            }
          }
        }
        .el-button {
          width: 1.12507rem;
          height: 0.562535rem;
          text-align: center;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.225014rem;
          border-radius: 0.093756rem;
          border: none;
          margin-right: 0.112507rem;
          span {
            color: #fff;
            font-size: 0.225014rem;
            font-weight: normal;
          }
        }
      }
    }
    .set_up {
      font-size: 0.375023rem;
      color: rgb(153, 153, 153);
    }
  }
}
.content_div {
  width: 100%;
  height: 60vh;
  background: #fff;
  box-sizing: border-box;
  padding: 0.187512rem 0.281268rem;
  .info_table {
    width: 100%;
    height: calc(100% - 0.750047rem);
    display: flex;
    .div_table {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.3s;
      .table_content {
        height: calc(100% - 1.12507rem);
        ::v-deep .el-table {
          border: 1px solid #e3e3e3;
          border-bottom: none;
          box-sizing: border-box;
          p {
            margin: 0;
          }
          .yincang {
            // visibility: hidden;
            // display: none;
            opacity: 0;
          }
          .cell {
            line-height: 0.562535rem;
          }
          colgroup {
            width: 100% !important;
            display: flex;
          }
          col {
            flex: 1;
            text-align: center;
          }
          tr {
            width: 100%;
            display: flex;
          }
          .el-table__header {
            height: 0.562535rem;
            th {
              // flex: 1;
              width: 100%;
              padding: 0;
              height: 0.562535rem;
              font-size: 0.225014rem;
              &:first-child {
                // width: 500px !important;
                max-width: 0.937559rem;
                .cell {
                  order: -99;
                }
              }
              // &:nth-child(2) {
              //   // max-width: 1.312582rem;
              //   .cell {
              //     order: -99;
              //   }
              // }
              &:last-child {
                max-width: 1.500094rem;
                .cell {
                  order: 99;
                }
              }
              .el-checkbox {
                .is-indeterminate {
                  .el-checkbox__inner {
                    color: #1b93f9;
                    background-color: #1b93f9;
                    border-color: #1b93f9;
                  }
                }
              }
            }
          }
          .el-table__body {
            height: 0.562535rem;
            .el-table__row {
              td {
                // flex: 1;
                width: 100%;
                padding: 0;
                height: 0.562535rem;
                font-size: 0.225014rem;
                color: #666;
                &:first-child {
                  // flex: 0;
                  // width: 500px !important;
                  max-width: 0.937559rem;
                  .cell {
                    order: -99;
                    .is-checked {
                      .el-checkbox__inner {
                        color: #1b93f9;
                        background-color: #1b93f9;
                        border-color: #1b93f9;
                      }
                    }
                    .el-switch {
                      .el-switch__input {
                        font-size: 0.300019rem;
                        .el-switch__core {
                          width: 0.48753rem;
                        }
                      }
                    }
                  }
                }
                // &:nth-child(2) {
                //   max-width: 1.312582rem;
                //   .cell {
                //     order: -99;
                //   }
                // }
                &:last-child {
                  max-width: 1.500094rem;
                  .cell {
                    order: 99;
                  }
                }
                .el-icon-edit-outline {
                  font-size: 0.262516rem;
                  color: #1b93f9;
                  margin-right: 0.037502rem;
                }
                .el-icon-delete {
                  font-size: 0.262516rem;
                  color: #ff2626;
                  margin-left: 0.037502rem;
                }
              }
            }
            .current-row {
              background: #e3f6ff;
            }
          }
          .el-table__body tr:hover > td {
            background-color: #e3f6ff;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: #e5e5e5;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            background-color: #c9c9c9;
          }
        }
      }
      .total_record {
        width: 100%;
        height: 0.562535rem;
        box-sizing: border-box;
        padding: 0 0.281268rem;
        border: 1px solid #e3e3e3;
        border-top: none;
        background: #f4f4f4;
        display: flex;
        p {
          margin: 0;
          line-height: 0.562535rem;
          padding-right: 0.281268rem;
          font-size: 0.225rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }
      .table_pagination {
        width: 100%;
        height: 1.12507rem;
        box-sizing: border-box;
        padding: 0.168761rem 0;
        display: flex;
        .pagination_div {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          ::v-deep .el-pagination {
            padding: 0;
            height: 0.525033rem;
            .el-pagination__sizes {
              margin: 0;
              .el-input {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
  .info_button {
    width: 100%;
    height: 0.750047rem;
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
      ::v-deep .el-button {
        width: 1.12507rem;
        height: 0.562535rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.093756rem;
      }
    }
  }
}
</style>